<template>
  <div class="login">
    <div class="login-nav">
      <van-icon name="arrow-left" />
    </div>
    <!-- 问候语 -->
    <div class="welcome">
      <div>欢迎来到知乎日报</div>
      <div class="eg">Welcome to Zhihu Daily</div>
    </div>
    <!-- 登录注册框 -->
    <van-form>
      <van-field
        v-model="userLog.phone"
        class="tel"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        autocomplete="off"
      />
      <van-field
        class="password"
        v-model="userLog.password"
        :type="password?'password':'text'"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        autocomplete="off"
        :right-icon="password?'closed-eye':'eye-o'"
        @click-right-icon="showPassword"
      />
      <div class="forget">
        <a href="#">忘记密码?</a>
      </div>
      <div class="submit-btn">
        <van-button round block type="info" class="log" @click="userLogin">登录</van-button>
        <van-button round block type="info" class="reg" @click="showPopup">注册</van-button>
      </div>
    </van-form>
    <!-- 注册弹出框 -->
    <van-popup position="bottom" closeable v-model="show">
      <div class="popReg">注册</div>
      <van-field
        class="reg_phone"
        v-model="userReg.phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        autocomplete="off"
      />
      <van-field
        v-model="userReg.password"
        :type="password?'password':'text'"
        name="密码"
        label="密码"
        placeholder="请输入密码"
          :right-icon="password?'closed-eye':'eye-o'"
        @click-right-icon="showPassword"
        autocomplete="off"
      />
      <van-field
        class="userName"
        v-model="userReg.nikeName"
        name="昵称"
        label="昵称"
        placeholder="昵称"
        autocomplete="off"
      />
      <div class="submit-btn">
        <van-button round block type="info" class="log" @click="userRegister">注册</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      // 弹出层默认关闭
      show: false,
      password: true,
      // 注册信息
      userReg: {
        phone: "",
        password: "",
        nikeName: ""
      },
      // 登录信息
      userLog: {
        phone: "",
        password: ""
      }
    };
  },
  //   生命周期
  created() {},
  methods: {
    // 点击注册弹出注册
    showPopup() {
      this.show = true;
    },
    // 注册方法
    userRegister() {
      // 发送请求
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/register",
        data: {
          appkey: this.appkey,
          phone: this.userReg.phone,
          password: this.userReg.password,
          nikeName: this.userReg.nikeName
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 100) {
          this.$toast.success(res.data.msg);
          this.show = false;
        } else if (res.data.code == 102) {
          this.$toast.fail(res.data.msg);
        }
      });
    },
    // 登录方法
    userLogin() {
      // 发送请求
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/login",
        data: {
          appkey: this.appkey,
          phone: this.userLog.phone,
          password: this.userLog.password
        }
      }).then(res => {
        console.log(res);
        // this.$toast.success(res);
        if (res.data.code == 200) {
          this.$router.push({ name: "Index" });
        } else this.$toast.fail(res.data.msg);
        localStorage.setItem("tk__",res.data.token);
      });
    },
    showPassword() {
      this.password = this.password ? false : true;
    }
  }
};
</script>
<style lang="postcss" scoped>
.login {
  background-color: #fff;
}
.login .login-nav {
  width: 100%;
  margin: 10px;
  font-size: 25px;
  background-color: #fff;
}
.welcome {
  margin: 80px 0 0 18px;
}
.welcome > div:nth-child(1) {
  font-size: 30px;
  font-weight: 700;
  color: #555;
  margin-bottom: 40px;
}
.welcome .eg {
  font-size: 18px;
  font-weight: 700;
  color: #999;
  margin-bottom: 70px;
}

.forget {
  margin: 24px 0 52px 0px;
}
.forget a {
  margin-left: 275px;
  color: #555;
  font-size: 18px;
}
.login .submit-btn {
  margin: 20px;
}
.log {
  margin-bottom: 50px;
  background-color: #0c34ba;
}
.reg {
  background-color: #fff;
  color: #000;
  border: 1px solid #ddd;
}
.popReg {
  color: #000;
  font-size: 20px;
  margin: 15px;
  font-weight: bold;
}
.reg_phone {
  margin-top: 60px;
}
</style>